$colors: (
    'primary': (
        '300': $primary-300,
        '400': $primary-400,
    ),
    'red': (
        '50': $red-50,
        '100': $red-100,
        '200': $red-200,
        '300': $red-300,
        '400': $red-400,
        '500': $red-500,
        '600': $red-600,
        '700': $red-700,
        '800': $red-800,
        '900': $red-900,
    ),
    'yellow': (
        '50': $yellow-50,
        '100': $yellow-100,
        '200': $yellow-200,
        '300': $yellow-300,
        '400': $yellow-400,
        '500': $yellow-500,
        '600': $yellow-600,
        '700': $yellow-700,
        '800': $yellow-800,
        '900': $yellow-900,
    ),
    'green': (
        '50': $green-50,
        '100': $green-100,
        '200': $green-200,
        '300': $green-300,
        '400': $green-400,
        '500': $green-500,
        '600': $green-600,
        '700': $green-700,
        '800': $green-800,
        '900': $green-900,
    ),
    'gray': (
        '50': $gray-50,
        '100': $gray-100,
        '200': $gray-200,
        '300': $gray-300,
        '400': $gray-400,
        '500': $gray-500,
        '600': $gray-600,
        '700': $gray-700,
        '800': $gray-800,
        '900': $gray-900,
    ),
);

@each $color-name, $shades in $colors {
    @each $shade-name, $color in $shades {
        .bg-#{$color-name}-#{$shade-name} {
            background-color: $color !important;
        }
        .text-#{$color-name}-#{$shade-name} {
            color: $color !important;
        }
        .border-color-#{$color-name}-#{$shade-name} {
            border-color: $color !important;
        }
    }
}

// 内外边距
$space: (
    'auto': auto,
    '0': 0,
    '10': 10rpx,
    '20': 20rpx,
    '30': 30rpx,
    '40': 40rpx,
    '50': 50rpx,
    '60': 60rpx,
    '70': 70rpx,
    '80': 80rpx,
    '90': 90rpx,
    '100': 100rpx,
);
@each $name, $value in $space {
    .m-#{$name} {
        margin: $value;
    }
    .mt-#{$name} {
        margin-top: $value;
    }
    .mr-#{$name} {
        margin-right: $value;
    }
    .mb-#{$name} {
        margin-bottom: $value;
    }
    .ml-#{$name} {
        margin-left: $value;
    }
    .mx-#{$name} {
        margin-left: $value;
        margin-right: $value;
    }
    .my-#{$name} {
        margin-top: $value;
        margin-bottom: $value;
    }

    .p-#{$name} {
        padding: $value;
    }
    .pt-#{$name} {
        padding-top: $value;
    }
    .pr-#{$name} {
        padding-right: $value;
    }
    .pb-#{$name} {
        padding-bottom: $value;
    }
    .pl-#{$name} {
        padding-left: $value;
    }
    .px-#{$name} {
        padding-left: $value;
        padding-right: $value;
    }
    .py-#{$name} {
        padding-top: $value;
        padding-bottom: $value;
    }
}

// 字体大小
$sizes: (
    '4': 4rpx,
    '8': 8rpx,
    '12': 12rpx,
    '16': 16rpx,
    '20': 20rpx,
    '24': 24rpx,
    '28': 28rpx,
    '32': 32rpx,
    '36': 36rpx,
    '44': 44rpx,
    '48': 48rpx,
    '52': 52rpx,
    '80': 80rpx,
    '120': 120rpx,
    '1000': 1000rpx,
);
@each $name, $value in $sizes {
    .text-#{$name} {
        font-size: $value;
    }
    .rounded-#{$name} {
        border-radius: $value !important;
    }
}

// grid布局
.grid {
    display: grid;
}
@for $i from 2 through 7 {
    .grid-cols-#{$i} {
        grid-template-columns: repeat($i, minmax(0, 1fr));
    }
    // 列合并
    .col-span-#{$i} {
        grid-column: span $i / span $i;
    }
    // 起始列位置
    .col-start-#{$i} {
        grid-column-start: $i;
    }
    // 结束列位置
    .col-end-#{$i} {
        grid-column-end: $i;
    }

    .grid-rows-#{$i} {
        grid-template-rows: repeat($i, minmax(0, 1fr));
    }
    // 行合并
    .row-span-#{$i} {
        grid-row: span $i / span $i;
    }
    // 起始行位置
    .row-start-#{$i} {
        grid-row-start: $i;
    }
    // 结束行位置
    .row-end-#{$i} {
        grid-row-end: $i;
    }
}
@for $i from 0 through 30 {
    @if $i % 5 == 0 {
        .gap-#{$i} {
            gap: $i + rpx;
        }
        .gap-x-#{$i} {
            column-gap: $i + rpx;
        }
        .gap-y-#{$i} {
            row-gap: $i + rpx;
        }
    }
}

@mixin multi-line-ellipsis($line-clamp) {
    display: -webkit-box;
    -webkit-line-clamp: $line-clamp;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 使用 mixin 来生成不同行数的省略号样式
.one-line-ellipsis {
    @include multi-line-ellipsis(1);
}

.two-line-ellipsis {
    @include multi-line-ellipsis(2);
}

.three-line-ellipsis {
    @include multi-line-ellipsis(3);
}

.text-white {
    color: #ffffff;
}
.text-black {
    color: #000000;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-bold {
    font-weight: bold;
}
.bg-white {
    background-color: #ffffff;
}
.bg-black {
    background-color: #000000;
}
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
.w-screen {
    width: 100vw;
}
.h-screen {
    height: 100vh;
}
.overflow-hidden {
    overflow: hidden;
}

.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.cursor-pointer {
    cursor: pointer;
}
.hidden {
    display: none;
}
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}

.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.flex-row {
    flex-direction: row;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.flex-col {
    flex-direction: column;
}
.flex-col-reverse {
    flex-direction: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-auto {
    flex: 1 1 auto;
}
.flex-initial {
    flex: 0 1 auto;
}
.flex-none {
    flex: none;
}

// 不被压缩
.shrink-0 {
    flex-shrink: 0;
}

// 父项目：用于控制如何沿容器主轴定位柔性项和网格项
.justify-normal {
    justify-content: normal;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-evenly {
    justify-content: space-evenly;
}
.justify-stretch {
    justify-content: stretch;
}

// 父项目：用于控制网格项如何沿其内联轴对齐
.justify-items-start {
    justify-items: start;
}
.justify-items-end {
    justify-items: end;
}
.justify-items-center {
    justify-items: center;
}
.justify-items-stretch {
    justify-items: stretch;
}

// 子项目：用于控制单个网格项如何沿其内联轴对齐
.justify-self-auto {
    justify-self: auto;
}
.justify-self-start {
    justify-self: start;
}
.justify-self-end {
    justify-self: end;
}
.justify-self-center {
    justify-self: center;
}
.justify-self-stretch {
    justify-self: stretch;
}

// 父项目：用于控制如何在多行flex和grid容器中定位行
.content-normal {
    align-content: normal;
}
.content-center {
    align-content: center;
}
.content-start {
    align-content: flex-start;
}
.content-end {
    align-content: flex-end;
}
.content-between {
    align-content: space-between;
}
.content-around {
    align-content: space-around;
}
.content-evenly {
    align-content: space-evenly;
}
.content-baseline {
    align-content: baseline;
}
.content-stretch {
    align-content: stretch;
}

// 父项目：用于控制如何沿容器的横轴定位柔性项和网格项
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}

// 子项目：单个柔性或网格项如何沿其容器的横轴定位
.self-auto {
    align-self: auto;
}
.self-start {
    align-self: flex-start;
}
.self-end {
    align-self: flex-end;
}
.self-center {
    align-self: center;
}
.self-stretch {
    align-self: stretch;
}
.self-baseline {
    align-self: baseline;
}

// 父项目：对项目进行调整和对齐
.place-content-center {
    place-content: center;
}
.place-content-start {
    place-content: start;
}
.place-content-end {
    place-content: end;
}
.place-content-between {
    place-content: space-between;
}
.place-content-around {
    place-content: space-around;
}
.place-content-evenly {
    place-content: space-evenly;
}
.place-content-baseline {
    place-content: baseline;
}
.place-content-stretch {
    place-content: stretch;
}

// 父项目：对项目进行调整和对齐
.place-items-start {
    place-items: start;
}
.place-items-end {
    place-items: end;
}
.place-items-center {
    place-items: center;
}
.place-items-baseline {
    place-items: baseline;
}
.place-items-stretch {
    place-items: stretch;
}

// 子项目：对单个项目进行调整和对齐
.place-self-auto {
    place-self: auto;
}
.place-self-start {
    place-self: start;
}
.place-self-end {
    place-self: end;
}
.place-self-center {
    place-self: center;
}
.place-self-stretch {
    place-self: stretch;
}
